import React, { Component } from 'react';
import { Table } from '@alifd/next';
import {
    refreshAble
} from '@src/components'

import {
    requestPaymentPlay
} from '../../../../reducer/MyProjectAction'


class TabPaymentPlan extends Component {
    constructor(props) {
        super(props)
    }

    componentDidMount() {
        this.onRefresh();
    }

    componentWillUnmount() {
        this.props.fetchDataCancle();
    }

    onRefresh = () => {
        this.props.fetchData(requestPaymentPlay());
    }

    render() {
        const {data, isRefreshing} = this.props;
        
        return (
            <section>
                <p className="title">注 : 发布回款计划后，咨询顾问、投资人才可在移动端查看期待回报</p>
                <Table
                    dataSource={data && data.data && data.data.rows || []}
                    hasBorder={true}
                    className="custom-table"
                    rowSelection={{onChange: () => {}}}
                    onResizeChange={this.onResizeChange}
                    loading={isRefreshing}
                    >
                    <Table.Column 
                        title="预计回款日期" 
                        dataIndex="repayDate"
                    />
                    <Table.Column title="计息天数(天)" dataIndex="days"/>
                    <Table.Column title="回款本金(元)" dataIndex="repayCapital" />
                    <Table.Column title="回款收益(元)" dataIndex="repayAmount" />
                    <Table.Column title="回款总额(元)" dataIndex="capitalIncomeAmount" />
                    <Table.Column
                    
                        title="回款状态"
                        dataIndex="statusStr"
                    />
                    <Table.Column
                    
                        title="发布状态"
                        dataIndex="releaseStatusStr"
                    />
                    
                </Table>
            </section>
        )
    }
}

export default refreshAble('tabPaymentPlan')(TabPaymentPlan);